<fieldset class="layui-elem-field layui-field-title site-title">
    <legend>
        CSS布局
    </legend>
</fieldset>






<ul class="layui-timeline">





    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">原文地址</h3>
            <ul>
                <li class="list">
                    <a href="http://zh.learnlayout.com/" target="_blank">http://zh.learnlayout.com/</a>
                </li>
            </ul>
        </div>
    </li>



    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">box-sizing</h3>


            <ul>
                <li class="list">设置box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度
                    <br>
                    <p>
                        <pre><code class="language-css">* {
-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
        box-sizing: border-box;
}</code></pre>
                    </p>
                </li>
            </ul>
        </div>
    </li>







    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">display</h3>


            <ul>
                <li class="list">display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个
                    inline 元素通常被叫做行内元素。
                </li>

                <li class="list">列一下display可能出现的值，我们重点关注: block, inline, inline-block, flex,
                    <br>
                    <p>
                        <pre><code class="language-css">
/* <display-outside> values */
display: block;
display: inline;
display: run-in;

/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> values */
display: contents;
display: none;

/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Global values */
display: inherit;
display: initial;
display: unset;</code></pre>
                    </p>
                </li>
            </ul>
        </div>
    </li>






    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">margin: auto;</h3>
            <ul>
                <li class="list">设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。
                    <br>
                    <p>
                        <pre><code class="language-css">#main {
width: 600px;
margin: 0 auto; 
}</code></pre>
                    </p>
                </li>
            </ul>
        </div>
    </li>




    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">position</h3>
            原文说得清晰易懂：
            <a href="http://zh.learnlayout.com/position.html" target="_blank">http://zh.learnlayout.com/position.html</a>，此处列一下要点以备忘
            <ul>


                <li class="list">
                    static： 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。
                </li>

                <li class="list">
                    relative： 表现的和 static 一样，除非你添加了一些额外的属性。譬如top, bottom, right, left
                </li>

                <li class="list">
                    fixed：一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。
                </li>

                <li class="list">
                    absolute： 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的
                    body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。
                </li>
            </ul>
        </div>
    </li>









    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">float</h3>
            <ul>
                <li class="list">另一个布局中常用的CSS属性是 float 。Float 可用于实现文字环绕图片，如下：
                    <br>
                    <p>
                        <pre><code class="language-css">img {
    float: right;
    margin: 0 0 1em 1em;
}</code></pre>
                    </p>
                    点击原文看效果：
                    <a href="http://zh.learnlayout.com/float.html" target="_blank">http://zh.learnlayout.com/float.html</a>
                </li>
            </ul>
        </div>
    </li>

















    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">End</h3>

        </div>
    </li>


























</ul>